import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import "./login.css"

import { actions,getUser } from "../../store/modules/login";
class Login extends Component {
    componentDidMount() { }
    render() {
        let {user:{phone,password},login:{changeUser,reqLogin},history} = this.props
        return (
            <div className="login">
                <h2>登录</h2>
                <div className="main">
                    <div>手机号<input type="text" value={phone} onChange={(e) => changeUser("phone", e.target.value)} /></div>
                    <div>密码<input type="text" value={password} onChange={(e) => changeUser("password", e.target.value)} /></div>
                    <div><button onClick={() => { reqLogin(history) }}>登 录</button></div>
                </div>
            </div>
        );
    }
}

//导入数据
let mapStateToProps = (state) => ({
    user:getUser(state)
});

//导入所有方法
let mapDispatchToProps = (dispatch) => ({ login: bindActionCreators(actions, dispatch)});

//将数据和方法给this.props
export default connect(mapStateToProps, mapDispatchToProps)(Login);